<template>
  <div class="app-mgr-container">
    <apps-mgr-info
      v-if="appInfo"
      :app="appInfo"
      @edit="handleEdit"
      @remove="handleRemove"
      :is-preview="true"
      class="m-0"
      style="border-radius: 10px;"
    />

    <div
      class="app-detail jzl-page-body"
      style="border-radius: 10px;"
      v-if="appInfo"
      v-html="appInfo.app_detail"
    />

    <el-dialog
      :title="appSyncWinName"
      v-model="appSyncShow"
      width="600"
    >
      <app-sync :app="appInfo" />
    </el-dialog>
    <el-dialog
      :title="appFormWinName"
      v-model="appFormShow"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <form-app
        v-if="appFormShow"
        :action-type="actionType"
        :current-data="appInfo"
        :parent-group-id="parentGroupId"
        @success="handleAppEditSuccess"
        @cancel="handleAppEditCancel"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { ElMessageBox } from 'element-plus';
import _ from 'lodash';
import appSync from '../app-sync.vue';
import formApp from '../../basic/menus/form-app.vue';
import appsMgrInfo from '../apps-mgr-info.vue';

const props = defineProps({
  app: {
    type: Object,
    default: null
  }
});

const emit = defineEmits(['select']);

const appInfo = ref(null);
const appFormShow = ref(false);
const appFormWinName = ref('修改应用');
const appSyncShow = ref(false);
const appSyncWinName = ref('同步应用');
const actionType = ref('edit');
const parentGroupId = ref(null);

const init = async () => {
  if (props.app) {
    appInfo.value = props.app;
  }
  // 如果需要根据 appId 获取应用信息，可以取消注释以下代码
  /* if (props.appId) {
      let data = await $japi.group.getGroup(props.appId);
      appInfo.value = data;
  } */
};

const handleAppCommand = (cmd) => {
  if (cmd === 'edit') {
    appFormWinName.value = `修改应用【${props.app.group_name}】`;
    appFormShow.value = true;
  } else if (cmd === 'remove') {
    if (!props.app || !props.app.group_id) return;

    let msg = `确定删除应用【${props.app.group_name}】?`;
    ElMessageBox.confirm(msg, '提示').then(async () => {
      let ret = await api.group.removeGroup(props.app.group_id);

      if (ret) {
        appInfo.value = null;
        init();
      }
    });
  } else if (cmd === 'sync') {
    appSyncShow.value = true;
    appSyncWinName.value = `应用【${props.app.group_name}】同步到终端系统`;
  }
};

const handleCreate = () => {
  appInfo.value = props.app;
  appFormWinName.value = `修改应用【${_.get(props.app, 'group_name')}]`;
  appFormShow.value = true;
};

const handleEdit = (app) => {
  appInfo.value = app;
  appFormWinName.value = `修改应用【${_.get(app, 'group_name')}]`;
  appFormShow.value = true;
};

const handleCreateApp = (g) => {
  actionType.value = 'createApp';
  appInfo.value = null;
  parentGroupId.value = _.get(g, 'group_id');
  appFormShow.value = true;
};

const handleRemove = (app) => {
  appInfo.value = app;
  appFormShow.value = true;

  let msg = `确定删除应用【${_.get(app, 'group_name')}]?`;
  ElMessageBox.confirm(msg, '提示').then(async () => {
    let ret = await api.group.removeGroup(appInfo.value.group_id);

    if (ret) {
      appInfo.value = null;
      init();
    }
  });
};

const handleAppEditSuccess = async () => {
  appFormShow.value = false;

  let gid = _.get(appInfo.value, 'group_id');
  if (!gid) return;

  appInfo.value = await api.group.getGroup(gid);
};

const handleAppEditCancel = () => {
  appFormShow.value = false;
};

onMounted(() => {
  init();
});

watch(() => props.app?.group_id, () => {
  init();
});
</script>

<style lang="scss" scoped>
.app-mgr-container {
  margin-left: 10px;
  width: 100%;
  align-content: flex-start;
  display: flex;
  flex-flow: column;
}
.app-detail {
  border-radius: 10px;
  margin-top: 10px;
  //margin: 10px;
  background-color: #fff;
  position: relative;
  padding: 15px;
  //min-height: 350px;
  flex: 1;
  overflow: auto;
}
</style>
